<template>
    <view class="page">
		
		<view class='alert-message'>
			<image src="../../static/message_icon_tips.png"></image>
			<text>请核对您的上传信息，若信息有误请重新扫描</text>
		</view>
        <view class="step-wrap">
            <view class="active">身份证认证</view>
            <view :class="{active:page>1}">驾驶证认证</view>
        </view>

        <view class="card" v-if="page==1">
           <view class="title">请按照示例图提交身份证照片</view>
			<view class="title1">
				<text class="title1-text">上传相关证件</text>
				<text class="title1-icon">*</text>	
			</view>
         <view class="img-wrap">
                <image :src="formData.idCardImg|mmvImageUrl" @click="onCheckIdCard('front')"></image>
                <image :src="formData.idCardImgBack|mmvImageUrl" @click="onCheckIdCard('back')"></image>
            </view>
            <view class="list">
                <view class="label">
					<text>姓名 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.customerName}} </text>
					<!-- <u-input v-model="formData.customerName"  /> -->
				</view>
				<view class='line'></view>
				<view class="label">
					<text>身份证号 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.idCardNo}} </text>
					<!-- <u-input v-model="formData.idCardNo"  /> -->
				</view>
				<view class='line'></view>
				<view class="label" @click='timeClick'>
					<text>失效日期 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.idCardExpirydate}} </text>
					<!-- <u-input  v-model="formData.idCardExpirydate" disabled  /> -->
				</view>
            </view>
        </view>

        <view class="card" v-if="page==2">
           <view class="title">请按照示例图提交驾驶证照片</view>
           <view class="img-wrap">
                <image :src="formData.driverImg|mmvImageUrl" @click="onCheckDriverCard('front')"></image>
                <image :src="formData.driverImgBack|mmvImageUrl" @click="onCheckDriverCard('back')"></image>
            </view>
            <view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
            <view class="list">
				<view class="label">
					<text>档案编号 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.driverNo}} </text>
					<!-- <u-input v-model="formData.driverNo" /> -->
				</view>
				<view class='line'></view>
				<view class="label">
					<text>准驾车型 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.quasiDrivingType}} </text>
					<!-- <u-input v-model="formData.quasiDrivingType"  /> -->
				</view>
				<view class='line'></view>
				<view class="label" @click='timeClick'>
					<text>失效日期 </text><text style='color:#FF6A15;'>*</text>
					<text>{{formData.driverValidity}} </text>
					<!-- <u-input v-model="formData.driverValidity" disabled  /> -->
				</view>
            </view>
        </view>

        <view class="tip">注：本人承诺证件真实有效，由此产生的法律责任由本人承担</view>
        <!-- <view class="tip2">信息完善奖励积分</view> -->
        <view class="bottom-button" @click="next">下一步</view>
        <!-- 登录弹窗 -->
        <LoginMask></LoginMask>
		 <u-datetime-picker
			:show="dateShow"
			mode="date"
			v-model="value1"
			cancelColor='#173B42'
			confirmColor='#000000'
			@confirm='confirm'
			@cancel='dateShow= false'
			showToolbar='false'
		></u-datetime-picker>
    </view>
</template>

<script>
import * as relaNameApi from '@/common/apis/relaName-api';
import * as baseApi from '@/common/api';
import LoginMask from '@/components/layout/login-mask.vue';
export default {
	
    components: {
        LoginMask,
    },
    data() {
        return {
            page: 1,
            formData: {
                idCardImg: "/static/idCardImg.jpg", // 身份证正面
                idCardImgBack: "/static/idCardImgBack.jpg", // 身份证背面
                driverImg: "/static/driverImg.jpg", // 驾驶证正页
                driverImgBack: "/static/driverImgBack.jpg", // 驾驶证副页
                customerName: "", // 姓名
                idCardNo: "", // 身份证号
                idCardExpirydate: "", // 身份证失效日期
                driverNo: "", // 驾驶证号
                quasiDrivingType: "", // 准驾车型
                driverValidity: "", // 驾驶证失效日期
                deptId: "", // 部门id
                businessPersonId: "" // 业务员id(非必传)
            },
            redirect: "",
			dateShow:false,
			mode:'single',
			value1:Number(new Date()),
        };
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        deptId() {
            return this.$store.state.user.deptId;
        },
    },
    watch: {
        openid(val) {
            this.validate();
        },
    },
    onLoad(op) {
		console.log(op,'收到的参数')
        // 记录重定向地址
        if (op.redirect) {
            this.redirect = decodeURIComponent(op.redirect);
			console.log(this.redirect,'收到的参数111111111')
        }
    },
    async mounted() {
        await this.$store.dispatch('user/MmvLogin');
        await this.validate();
    },
    methods: {
		confirm(e){
			this.dateShow = false
			let moment = require('../../util/moment.js');
			let m1 = moment(e.value).format("YYYY-MM-DD");
			if(m1){
				if(this.page == 1){
					this.$set(this.formData,'idCardExpirydate',m1)
				}else{
					this.$set(this.formData,'driverValidity',m1)
				}
			}	
		},
		timeClick(){
			this.dateShow = true
		},
        /**
         * 验证是否实名
         */
		
        async validate() {
            const result = await relaNameApi.valiAuthentication({ deptId: this.deptId });
            if (result == 2) {
                uni.showToast({ title: '用户已实名', icon: 'success' });
                await this.leavePage();
            }
        },
        /**
         * 选择图片
         */
        async chooseImage() {
            return new Promise((resolve, reject) => {
                uni.chooseImage({
                    success({ tempFilePaths }) {
                        resolve(tempFilePaths);
                    },
                    fail(err) {
                        uni.showToast({ title: '图片选择失败', icon: 'error' });
                        reject(err);
                    }
                })
            });
        },
        /**
         * 上传图片
         */
        async upload(url) {
            uni.showToast({ title: '图片上传中...', icon: 'loading' });
            try {
                const result = await baseApi.uploadfiles({
                    name: 'file',
                    filePath: url,
                });
                uni.showToast({ title: '图片上传成功', icon: 'success' });
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交身份证
         */
        async onCheckIdCard(idCardSide) {
	
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                const result = await relaNameApi.idCard({
                    url: url,
                    idCardSide,
                });
                if (idCardSide == 'front') {
                    this.formData.idCardImg = url;
                    this.formData.customerName = result.name;
                    // this.formData.address = result.address;
                    this.formData.idCardNo = result.idCard;
                }
                if (idCardSide == 'back') {
                    this.formData.idCardImgBack = url;
                    // this.formData.startDate = result.startDate;
                    this.formData.idCardExpirydate = result.endDate;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 提交驾驶证
         */
        async onCheckDriverCard(driverCardSide) {
            try {
                const tempFilePaths = await this.chooseImage();
                const url = await this.upload(tempFilePaths[0]);
                if (driverCardSide == 'front') {
                    const result = await relaNameApi.driverCard({
                        url: url,
                    });
                    this.formData.driverImg = url;
                    this.formData.driverNo = result.driverNo;
                    this.formData.quasiDrivingType = result.carType;
                    this.formData.driverValidity = result.endTime;
                }
                if (driverCardSide == 'back') {
                    this.formData.driverImgBack = url;
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 下一步
         */
        async next() {
            if (this.page == 1) {
                if (!this.formData.idCardImg || this.formData.idCardImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证人像', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardImgBack || this.formData.idCardImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少身份证国徽', icon: 'error' });
                    return;
                }
                if (!this.formData.customerName) {
                    uni.showToast({ title: '缺少姓名', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardNo) {
                    uni.showToast({ title: '缺少身份证号', icon: 'error' });
                    return;
                }
                if (!this.formData.idCardExpirydate) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                this.page = 2;
            } else {
                if (!this.formData.driverImg || this.formData.driverImg.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证正页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverImgBack || this.formData.driverImgBack.indexOf('/static/') > -1) {
                    uni.showToast({ title: '缺少驾驶证副页', icon: 'error' });
                    return;
                }
                if (!this.formData.driverNo) {
                    uni.showToast({ title: '缺少驾驶证号', icon: 'error' });
                    return;
                }
                if (!this.formData.quasiDrivingType) {
                    uni.showToast({ title: '缺少准驾车型', icon: 'error' });
                    return;
                }
                if (!this.formData.driverValidity) {
                    uni.showToast({ title: '缺少失效时间', icon: 'error' });
                    return;
                }
                await this.submit();
            }
        },
        /**
         * 提交认证信息
         */
        async submit() {
            this.formData.deptId = uni.getStorageSync('storeId');
            try {
                const result = await relaNameApi.authentication(this.formData);
                uni.showToast({ title: '完成' });
                await this.leavePage();
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
                await this.leavePage();
            }
        },
        /**
         * 离开页面
         */
        async leavePage() {
            if (this.redirect) {
                uni.redirectTo({ url: this.redirect });
            } else {
                uni.navigateBack();
            }
        },

    },
}
</script>
<style>
	.u-input{
		background-color: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	.timeTitle{
		font-size:32upx ;
		font-weight: bold;
		color:#000000,
	}
.page {
	background-color:#F8F8F8 ;
	.alert-message{
		width: 100%;
		height:36px ;
		background-color:#DDEFFE;
		display: flex;
		align-items: center;
		font-size:12px ;
		color:#173B42;
		margin-bottom: 16px;
		image{
			width: 16px;
			height: 16px;
			margin-right: 8px;
			margin-left: 16px;
		}
	}
}
.step-wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    view {
        color: #666666 ;
        font-size: 16px;
        font-weight: bold;
		padding:5px 0;
		
    }
    view + view {
        margin-left: 176upx;
    }
    .active {
        color:#173B42 ;
		border-bottom: 2px solid #173B42;
    }
}

.card {
    margin: 16px;
	padding:16px;
    .title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        margin-bottom: 9px;
    }
	.title1{
		font-size: 14px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		.title1-text{
			color:#666666 !important;
		}
		.title1-icon{
			color:#FF6A15;
		}
	}
    .img-wrap {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        image {
            width: 48%;
            height: 80px;
        }
    }
    .desc {
        margin-bottom: 49upx;
        font-size: 26upx;
        font-weight: bold;
        color: #999;
    }

    .list {
        .label {
            margin-bottom: 16px;
            font-size: 14px;
            color: #666666;
            display: flex;
            // justify-content: space-between;
			align-items: center;
		
        }
		.line{
			width: 100%;
			border-bottom: 1px solid #F8F8F8;
			margin-bottom: 16px;
		}
    }
}
.tip {
    font-size: 11px;
    color: #FF6A15 ;
    text-align: center;
}
.tip2 {
    width: 100%;
    font-size: 26upx;
    font-weight: bold;
    text-align: center;
    color: #232323;
    position: fixed;
    bottom: 113upx;
}
.bottom-button {
    width: 90%;
	margin:32px auto;
    line-height: 96upx;
    background: #173B42;
    text-align: center;
    color: #fff;
	font-size: 16px;
	border-radius: 4px;
}
</style>
